<template>
  <el-col :span="6">
    <el-card shadow="always" class="main-statistic__count">
      <span><slot></slot>: <span v-loading="loading">{{ count < 0 ? '--' : count }}</span></span>
      <el-button @click="getStatisticData">refresh</el-button>
    </el-card>
  </el-col>
</template>
<script>
  import { getStatisticDataApi } from '@/api/data'
  export default {
    name: 'CountItem',
    props: {
      type: {
        required: true,
        type: String
      }
    },
    data () {
      return {
        count: -1,
        loading: false,
      }
    },
    methods: {
      // async getStatisticData () {
      //   this.loading = true
      //   try {
      //     const count = await getStatisticDataApi(this.type)
      //     this.count = count
      //     this.loading = false
      //   } catch (error) {
      //     this.loading = false
      //   }
      // }
      getStatisticData () {
        this.loading = true
        this.count = -1
        getStatisticDataApi(this.type).then(count => {
          this.count = count
        }).finally(() => {
          this.loading = false
        })
      }
    },
    mounted () {
      this.getStatisticData()
    }
  }
</script>